<template>
  <div class="head">
    <div :class="['slidebtn',siderBarShow?'':'isActive']">
      <span class="icon-Hamburger" @click="toggleSiderBarShow"></span>
    </div>
    <div class="userinfo">
      <span>用户名：【{{$store.state.username}}】</span>
      <span>项目：【{{$store.state.project}}】</span>
      <span class="icon-set"></span>
      <span class="icon-login_Out" @click="logout"></span>
    </div>
  </div>
</template>

<script>
import {logout} from '../../../api/login.js'
import {mapState} from 'vuex'
export default {
  created () {
  },
  computed: {
    ...mapState([
      'siderBarShow',
      'username'
    ])
  },
  methods: {
    toggleSiderBarShow () {
      this.$store.commit('SET_SIDERBARSHOW', !this.siderBarShow)
    },
    logout () {
      this.$confirm('此操作将退出后台管理系统， 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(1)
        logout(this.username).then(res => {
          let {code, msg} = res.data
          if (code === 200) {
            this.$message({
              type: 'success',
              message: msg
            })
            window.sessionStorage.removeItem('token')
            this.$store.commit('CLEAR_ALL')
            this.$router.push({path: '/login'})
          }
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="less" scoped>
.head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5%;
  background: #fff;
  .slidebtn{
    font-size: 22px;
    margin: 20px;
    cursor: pointer;
    transition: .38s;
    transform-origin: 50% 50%;
    transform: rotate(0deg);
  }
  .userinfo{
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    span{
      margin: 5px;
      cursor: pointer;
    }
  }
  .isActive{
    transform: rotate(-90deg);
  }
}
</style>
